<template>
  <div
    class="headerHome"
    :style="{ background: currentHeader == 'homeSlot' ? '#48bd5a' : '#f7f7f7' }"
  >
    <slot :name="currentHeader"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentHeader: "homeSlot",
    };
  },
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        if (newVal == "/home") {
          this.currentHeader = "homeSlot";
        } else if (this.$route.meta.title == "BookAndMovie") {
          this.currentHeader = "movieSlot";
        } else if (newVal == "/broadcast") {
          this.currentHeader = "broadcastSlot";
        } else if (newVal == "/group") {
          this.currentHeader = "groupSlot";
        } else {
          this.currentHeader = "mySlot";
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.headerHome {
  height: 45px;
  width: 100vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-right: 2px;
  padding: 0 0 0 5px;
}
</style>